<template>
  <div class="task-main" v-title data-title="研发项目报表专区">
    <home-nav :userData="userinfo"></home-nav>
    <div class="banner"></div>
    <div class="container">
      <div class="header">
        <a-row type="flex" justify="space-between" align="middle">
          <a-col :span="24">
            <div class="tab-span">
              <span
                v-for="(item, index) of activeTabList"
                :key="index"
                :class="[{ active: activeTab === index }]"
                @click="changeTab(index, item)"
                >{{ item.name }}</span
              >
            </div>
          </a-col>
        </a-row>
      </div>
      <!-- 项目研发专区 -->
      <template v-if="activeTab == 0">
        <div class="tree-main" :class="{ shrinkage: shrinkageFlag }">
          <div class="box-left ant-table-scroll">
            <div class="tree-title">
              <span class="bold">目录</span>
              <a-icon
                type="menu-fold"
                @click="shrinkageFlag = !shrinkageFlag"
                :title="!shrinkageFlag ? '收缩目录' : '展开目录'"
              />
            </div>
            <div class="tree" v-if="!shrinkageFlag">
              <a-tree
                v-if="treeData.length"
                :tree-data="treeData"
                :selectedKeys="treeSelectedKeys"
                @select="onSelectClass"
                :row-selection="rowSelection"
                :show-line="true"
              />
            </div>
          </div>
          <div v-show="skeletonFlag">
            <a-skeleton active />
            <a-skeleton active />
          </div>
          <div class="content-list">
            <div class="cascade" :class="['hte-nav-box',{'hte-nav-hidden': showMore}]">
              <div
                class="projec-class-box clearFix"
                :class="{ 'project-class-more': more.moreRef0Class }"
                ref="moreRef0"
              >
                <div class="projec-class-lable m120">项目分类：</div>
                <ul class="projec-class-list clearFix" :class="{ 'projec-class-list-more': more.moreRef0 }">
                  <li
                    v-for="item of projectClassList"
                    :key="item.code"
                    :class="['hoverShow', { active: projectClass == item.code }]"
                    @click="handleToggle(item.code, 'projectClass', 'search')"
                  >
                    {{ item.name }}
                  </li>
                </ul>
                <div class="btn-more" @click="changeMore('moreRef0')">
                  更多<a-icon
                    :class="['icon-child-down', { 'icon-child-up': more.moreRef0 }]"
                    slot="suffixIcon"
                    type="caret-up"
                  />
                </div>
              </div>
              <div class="projec-class-box clearFix">
                <div class="projec-class-lable m120">年份：</div>
                <ul class="projec-class-list clearFix">
                  <li
                    v-for="item of yearList"
                    :key="item.code"
                    :class="['hoverShow', { active: searchYear == item.code }]"
                    @click="handleToggle(item.code, 'searchYear', 'search')"
                  >
                    {{ item.name }}
                  </li>
                </ul>
              </div>
              <div
                class="projec-class-box clearFix"
                :class="{ 'project-class-more': more.moreRef1Class }"
                ref="moreRef1"
              >
                <div class="projec-class-lable m120">状态：</div>
                <ul class="projec-class-list clearFix" :class="{ 'projec-class-list-more': more.moreRef1 }">
                  <li
                    v-for="item of projectStatusList"
                    :key="item.status"
                    :class="['hoverShow', { active: projectStatus == item.status }]"
                    @click="handleToggle(item.status, 'projectStatus', 'search')"
                  >
                    {{ item.title }}
                  </li>
                </ul>
                <div class="btn-more" @click="changeMore('moreRef1')">
                  更多<a-icon
                    :class="['icon-child-down', { 'icon-child-up': more.moreRef1 }]"
                    slot="suffixIcon"
                    type="caret-up"
                  />
                </div>
              </div>
            </div>
            <div
              v-if="!this.treeDeptId"
              v-infinite-scroll="handleInfiniteOnLoad"
              :infinite-scroll-disabled="busy"
              :infinite-scroll-distance="10"
            >
              <div class="head" v-for="(item, index) in headList" :key="index" v-show="item.show">
                <div class="headContent">
                  <span class="title">{{ item.deptName }}情况</span>
                  <span class="info">(周期单位：天<i></i>项目单位：个<i></i>费用单位：万)</span>
                  <span class="detail" @click="gotoDeptDetail(item)">详细报表》</span>
                </div>
                <contentHeadList :list="contentHeadList" :item="item"/>
              </div>
              <div class="loaddingbox" v-show="loaddingFlag" style="margin-top: 50px">
                <a-spin spinning :delay="10" tip="加载中" />
              </div>
              <div class="tips-box" v-show="!loaddingFlag && !emptyFlag" style="margin-top: 50px">暂无更多数据</div>
              <div v-show="emptyFlag" style="margin-top: 50px">
                <a-empty v-show="emptyFlag" />
              </div>
            </div>
            <div v-else>
              <div class="head">
                <div class="headContent">
                  <span class="title">{{ treeDeptName }}情况</span>
                  <span class="info">(周期单位：天<i></i>项目单位：个<i></i>费用单位：万)</span>
                  <!-- <a-select
                    v-model="projectClass"
                    :options="projectClassOptions"
                    @change="projectClassChange"
                    title="选择项目分类查询"
                    class="headSelect"
                  />
                  <year-picker
                    :year="searchYear"
                    style="margin-left: 15px; display: inline-block"
                    @yearChange="yearChange"
                  /> -->
                </div>
                <contentHeadList :list="contentHeadList" :item="contentHeadData" v-show="!showMore"/>
                <div class="hte-nav-tap" :class="{ 'border-nav-top': showMore }">
                  <span @click="showMore = !showMore"
                    >点击{{ !showMore ? '收起' : '展开' }}
                    <a-icon
                      :class="['icon-child-down', { 'icon-child-up': showMore }]"
                      slot="suffixIcon"
                      type="caret-up"
                    />
                  </span>
                </div>
              </div>

              <div class="content">
                <ul>
                  <li
                    v-for="(v, i) in contentMidList"
                    :key="i"
                    :class="['hoverShow', { active: contentCode == v.code }]"
                    @click="handleToggle(v.code, 'contentCode')"
                  >
                    {{ v.name }}
                  </li>
                </ul>
                <template v-if="contentCode == 'level'">
                  <project-level
                    ref="projectLevel"
                    :treeDeptId="treeDeptId"
                    :subDeptIdByAtypeRoot="subDeptIdByAtypeRoot"
                    :deptName="treeDeptName"
                    :projectClass="projectClass"
                    :searchYear="searchYear"
                    :projectStatus="projectStatus"
                  ></project-level>
                </template>
                <template v-if="contentCode == 'process'">
                  <project-process
                    ref="projectProcess"
                    :treeDeptId="treeDeptId"
                    :subDeptIdByAtypeRoot="subDeptIdByAtypeRoot"
                    :deptName="treeDeptName"
                    :projectClass="projectClass"
                    :searchYear="searchYear"
                    :projectStatus="projectStatus"
                  ></project-process>
                </template>
              </div>
            </div>
          </div>
        </div>
      </template>
      <!-- 产品明细表 -->
      <template v-else>
        <product-detail></product-detail>
      </template>
    </div>
    <a-back-top class="backtodom" />
  </div>
</template>
<script>
import { getAction, postAction } from '@/api/manage'
import Vue from 'vue'
import { ACCESS_TOKEN, USER_INFO } from '@/store/mutation-types'
import { ResizeHandleMoreMixin } from '@/mixins/ResizeHandleMoreMixin'
import moment from 'moment'
import {filterHasPermission} from '@/utils/hasPermission'

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows)
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows)
  },
}
export default {
  name: 'ProductHome',
  mixins: [ResizeHandleMoreMixin],
  components: {
    HomeNav: () => import('@/components/layouts/HomeNav'),
    ProductDetail: () => import('@views/productCycle/ProductDetail'),
    ProjectLevel: () => import('@views/productCycle/components/ProjectLevel'),
    ProjectProcess: () => import('@views/productCycle/components/ProjectProcess'),
    YearPicker: () => import('@/components/tools/YearPicker'),
    ContentHeadList: () => import('@views/productCycle/components/ContentHeadList')
  },
  data() {
    return {
      userinfo: {
        info: this.$store.getters.userInfo,
        module: 'ProductHome',
      },
      activeTab: 0,
      activeTabList: [{ name: '项目研发专区' }, { name: '产品明细表' }],
      contentHeadList: [
        { name: '总项目数量', type: 'project', key: 'projectTotal', url: require('@/assets/productCycle/projectTotal.png') },
        { name: '上市节点的数量', type: 'project', key: 'listNodeTotal', url: require('@/assets/productCycle/listNodeTotal.png') },        
        { name: '已结题项目数',type: 'project', key: 'completeProjectTotal', url: require('@/assets/productCycle/yanshouTotal.png') },
        { name: '参与已验收的数量',type: 'project', key: 'acceptanceNodeTotal', url: require('@/assets/commissioned.png') },
        {
          name: '总节点完成率',
          type: 'project',
          key: 'timeNodeCompleteRate',
          url: require('@/assets/productCycle/timeNodeCompleteRate.png'),
        },
        { name: '总延误天数', type: 'project', key: 'delayDaysTotal', url: require('@/assets/productCycle/delayDaysTotal.png') },                
        { name: '项目平均周期', type: 'date', key: 'projectCycleAvg', url: require('@/assets/productCycle/projectCycleAvg.png'), 
          tip: '(目标为100，未达标)'
        },
        { name: '项目最长周期', type: 'date', key: 'maxProjectCycle', url: require('@/assets/productCycle/maxProjectCycle.png') },
        { name: '项目最短周期', type: 'date', key: 'minProjectCycle', url: require('@/assets/productCycle/minProjectCycle.png') },
        
        {
          name: '立项-中期(平均)',
          type: 'date',
          key: 'middleCycleTotal',
          url: require('@/assets/productCycle/middleCycleTotal.png'),
        },
        {
          name: '中期-试产(平均)',
          type: 'date',
          key: 'tryCycleTotal',
          url: require('@/assets/productCycle/tryCycleTotal.png'),
        },
        {
          name: '试产-上市(平均)',
          type: 'date',
          key: 'acceptanceCycleTotal',
          url: require('@/assets/productCycle/acceptanceCycleTotal.png'),
        },
        { name: '总费用', type: 'budget', key: 'budgetTotal', url: require('@/assets/productCycle/budgetTotal.png') },
        { name: '总消耗费用', type: 'budget', key: 'costTotal', url: require('@/assets/productCycle/costTotal.png') },
        { name: '总可用费用', type: 'budget', key: 'canUsedTotal', url: require('@/assets/productCycle/canUsedTotal.png') },
      ],
      contentHeadData: {},
      contentMidList: [
        { name: '项目等级报表', code: 'level' },
        { name: '项目进度表', code: 'process' },
      ],
      contentCode: 'level',
      currentUserId: '',
      treeDeptId: null,
      treeDeptName: '',
      treeData: [],
      subDeptIdByAtypeRoot: '',
      shrinkageFlag: false,
      treeSelectedKeys: [0],
      rowSelection,
      showMore: false,
      projectClassOptions: [],
      projectClass: '10',
      headList: [],
      loaddingFlag: false,
      skeletonFlag: false, // 骨架
      emptyFlag: false, // 无数据
      loaddingFlag: false, // 加载中
      busy: false,
      firstInto: false,
      searchYear: '',
      projectStatus: null,
      pageDeptObj: {},
      pageSize: 4,
      pageNO: 1,
      projectClassList: [],
      yearList: [],
      projectStatusList: [
        { title: '全部', status: null },
        { title: '执行中', status: 4 },
        { title: '待审批', status: 2 },
        { title: '待上会', status: 3 },
        { title: '验收中', status: 5 },
        { title: '已结题', status: 6 },
        { title: '创建中', status: 1 },
        { title: '已转储', status: 10 },
        { title: '已终止', status: 7 },
      ],
    }
  },
  mounted() {
    if(filterHasPermission('reportCentent:index') ){
      this.activeTabList.push({name: '海芯平台报表中心', url: '/reportCenter'})
    }
    this.initProjectCategoryOptions()
    this.getTreeData()
    this.firstInto = true
  },
  created() {
    this.currentUserId = Vue.ls.get(USER_INFO).username
  },
  methods: {
    // 切换大类别
    changeTab(index, item) {
      if(item.url){
        let urlJump = this.$router.resolve({ path: item.url })
        window.open(urlJump.href, '_blank')
        return
      }
      this.activeTab = index
      window.scrollTo(0, 0)
    },
    getTreeData() {
      var vm = this
      getAction('/techProjectReport/getTreeList')
        .then((res) => {
          if (res.code == 200) {
            vm.treeData = res.result || []
            if (!this.treeDeptId) {
              this.pageDeptObj = JSON.parse(vm.treeData[0].slotTitle)
              this.initHeadData()
            }
          } else {
            this.$message.warning('查询目录树失败:' + res.message)
          }
          vm.treeSelectedKeys = [0]
        })
        .catch((res) => {
          this.$message.warning('查询目录树失败:' + res.message)
        })
    },
    /**
     * 选择树节点，切换列表数据
     */
    onSelectClass(selectedKeys, e) {
      if (!e.selected) {
        selectedKeys = this.treeSelectedKeys
      } else {
        this.treeSelectedKeys = selectedKeys
        this.treeDeptId = selectedKeys[0] == 0 ? null : selectedKeys[0]
        this.subDeptIdByAtypeRoot = this.treeDeptId
          ? e.selectedNodes[0]
            ? e.selectedNodes[0].data.props.slotTitle
            : ''
          : ''
        this.treeDeptName = selectedKeys[0] && e.selectedNodes[0] ? e.selectedNodes[0].data.props.title : ''
      }
      this.initHeadData()
    },
    initHeadData() {
      if (this.treeDeptId) {
        this.initRightHeadNumber()
      } else {
        this.searchYear = ''
        this.projectClass = '10'
        this.projectStatus = null
        this.initAlldeptNumberByPage()
      }
    },
    initAlldeptNumberByPage(type) {
      this.loaddingFlag = true
      let pageList = []
      if (type !== 'scroll') {
        this.skeletonFlag = true
        this.emptyFlag = false
        this.pageNO = 1
        this.headList = []
        let end = this.pageSize > this.pageDeptObj.length ? this.pageDeptObj.length : this.pageSize
        for (var i = 0; i < end; i++) {
          const obj = {}
          obj.treeDeptId = this.pageDeptObj[i].id
          obj.deptName = this.pageDeptObj[i].deptname
          obj.subDeptIdByAtypeRoot = this.pageDeptObj[i].subDeptIdByAtypeRoot
          obj.projectClass = this.projectClass
          obj.searchYear = this.searchYear
          obj.projectStatus = this.projectStatus
          pageList.push(obj)
        }
      } else {
        let start = (this.pageNO - 1) * this.pageSize
        let end =
          this.pageNO * this.pageSize > this.pageDeptObj.length ? this.pageDeptObj.length : this.pageNO * this.pageSize
        for (var i = start; i < end; i++) {
          const obj = {}
          obj.treeDeptId = this.pageDeptObj[i].id
          obj.deptName = this.pageDeptObj[i].deptname
          obj.subDeptIdByAtypeRoot = this.pageDeptObj[i].subDeptIdByAtypeRoot
          obj.projectClass = this.projectClass
          obj.searchYear = this.searchYear
          obj.projectStatus = this.projectStatus
          pageList.push(obj)
        }
      }
      postAction('/techProjectReport/queryTechProjectSummaryPage', pageList).then((res) => {
        if (res.code == 200) {
          let list = []
          if (res.result && res.result.length > 0) {
            res.result.forEach((item) => {
              let contentHeadData = item || {}
              contentHeadData.timeNodeCompleteRate = contentHeadData.timeNodeTotal
                ? (parseFloat(contentHeadData.completeTotal / contentHeadData.timeNodeTotal) * 100).toFixed(2) + '%'
                : '0.00%'
              contentHeadData.projectCycleAvg = parseInt(
                contentHeadData.projectCycleTotal / contentHeadData.projectTotal
              )
              contentHeadData.budgetTotal = parseFloat(
                parseFloat(contentHeadData.budgetTotal / 10000).toFixed(2)
              ).toLocaleString()
              contentHeadData.costTotal = parseFloat(
                parseFloat(contentHeadData.costTotal / 10000).toFixed(2)
              ).toLocaleString()
              contentHeadData.canUsedTotal = parseInt(contentHeadData.budgetTotal - contentHeadData.costTotal)

              if (this.projectClass == '10') {
                contentHeadData.middleCycleTotal = contentHeadData.projectTotal
                  ? parseFloat(contentHeadData.middleCycleTotal / contentHeadData.projectTotal).toFixed()
                  : 0
                contentHeadData.tryCycleTotal = contentHeadData.projectTotal
                  ? parseFloat(contentHeadData.tryCycleTotal / contentHeadData.projectTotal).toFixed()
                  : 0
                contentHeadData.acceptanceCycleTotal = contentHeadData.projectTotal
                  ? parseFloat(contentHeadData.acceptanceCycleTotal / contentHeadData.projectTotal).toFixed()
                  : 0
              } else {
                contentHeadData.middleCycleTotal = '无'
                contentHeadData.tryCycleTotal = '无'
                contentHeadData.acceptanceCycleTotal = '无'
              }
              if (contentHeadData.projectTotal == 0) {
                contentHeadData.show = false
              } else {
                contentHeadData.show = true
              }
              list.push(contentHeadData)
            })
            if (type === 'scroll') {
              list = this.headList.concat(list)
              this.loaddingFlag = false // 加载中
            } else {
              this.skeletonFlag = false
            }
            this.headList = list
            this.busy = false
          } else {
            if (type === 'scroll') {
              this.loaddingFlag = false // 加载中
            } else {
              this.emptyFlag = true
              this.skeletonFlag = false
            }
            this.busy = true
          }
          this.loaddingFlag = false
        } else {
          this.loaddingFlag = false
          this.$message.warning('数据加载失败:' + res.message)
        }
      })
    },
    initRightHeadNumber() {
      postAction('/techProjectReport/queryTechProjectSummary', {
        subDeptIdByAtypeRoot: this.subDeptIdByAtypeRoot,
        treeDeptId: this.treeDeptId,
        projectClass: this.projectClass,
        searchYear: this.searchYear,
        projectStatus: this.projectStatus,
      }).then((res) => {
        this.tableLoading = false
        if (res.success) {
          this.contentHeadData = res.result || {}
          this.contentHeadData.timeNodeCompleteRate = this.contentHeadData.timeNodeTotal
            ? (parseFloat(this.contentHeadData.completeTotal / this.contentHeadData.timeNodeTotal) * 100).toFixed(2) +
              '%'
            : '0.00%'
          this.contentHeadData.projectCycleAvg = parseInt(
            this.contentHeadData.projectCycleTotal / this.contentHeadData.projectTotal
          )
          this.contentHeadData.budgetTotal = parseFloat(
            parseFloat(this.contentHeadData.budgetTotal / 10000).toFixed(2)
          ).toLocaleString()
          this.contentHeadData.costTotal = parseFloat(
            parseFloat(this.contentHeadData.costTotal / 10000).toFixed(2)
          ).toLocaleString()
          this.contentHeadData.canUsedTotal = parseInt(
            this.contentHeadData.budgetTotal - this.contentHeadData.costTotal
          )

          if (this.projectClass == '10') {
            this.contentHeadData.middleCycleTotal = this.contentHeadData.projectTotal
              ? parseFloat(this.contentHeadData.middleCycleTotal / this.contentHeadData.projectTotal).toFixed()
              : 0
            this.contentHeadData.tryCycleTotal = this.contentHeadData.projectTotal
              ? parseFloat(this.contentHeadData.tryCycleTotal / this.contentHeadData.projectTotal).toFixed()
              : 0
            this.contentHeadData.acceptanceCycleTotal = this.contentHeadData.projectTotal
              ? parseFloat(this.contentHeadData.acceptanceCycleTotal / this.contentHeadData.projectTotal).toFixed()
              : 0
          } else {
            this.contentHeadData.middleCycleTotal = '无'
            this.contentHeadData.tryCycleTotal = '无'
            this.contentHeadData.acceptanceCycleTotal = '无'
          }
        } else {
          this.$message.error(res.message)
        }
      })
    },
    handleToggle(code, codeRef, type) {
      this[codeRef] = code
      if (type && this.treeDeptId) {
        this.initRightHeadNumber()
      } else if (type && !this.treeDeptId) {
        this.initAlldeptNumberByPage()
      }
    },
    initProjectCategoryOptions() {
      var vm = this
      getAction('/manage/codeInfo/list', { column: 'code', order: 'Asc', type: '项目分类', isdel: 0, pageSize: -1 })
        .then((res) => {
          if (res.code == 200) {
            var list = res.result
            if (list != null) {
              vm.projectClassList = list.records || []
              this.$nextTick(() => {
                this.setBtnMore('moreRef0')
              });
            }
          } else {
            this.$message.warning('查询项目分类失败:' + res.message)
          }
        })
        .catch((res) => {
          this.$message.warning('查询项目分类失败:' + res.message)
        })

      let year = parseInt(moment().format('YYYY'))
      this.searchYear = ''
      this.yearList.push({ code: '', name: '全部' })
      for (var i = 0; i < 5; i++) {
        if (year - i < 2020) {
          break; 
        }
        this.yearList.push({ code: year - i + '', name: year - i })
      }
      this.$nextTick(() => {
        this.setBtnMore('moreRef1')
      });
    },
    projectClassChange() {
      this.initRightHeadNumber()
    },
    handleInfiniteOnLoad() {
      if (this.firstInto) {
        this.firstInto = false
        return
      }
      if (this.activeTab === 0) {
        this.loaddingFlag = true
        if (this.headList.length >= this.pageDeptObj.length) {
          this.busy = true
          this.loaddingFlag = false
          return
        }
        this.pageNO += 1
        this.initAlldeptNumberByPage('scroll')
      }
    },
    gotoDeptDetail(item) {
      this.treeSelectedKeys = [item.treeDeptId]
      this.treeDeptId = item.treeDeptId
      this.treeDeptName = item.deptName
      this.subDeptIdByAtypeRoot = item.subDeptIdByAtypeRoot
      this.initHeadData()
    },
    yearChange(date) {
      this.searchYear = date
      this.initRightHeadNumber()
    },
  },
}
</script>
<style lang="less" scoped>
@import 'productCycle.less';
@import '~@assets/less/hte-main.less';
.tree-main {
  display: flex;
  justify-content: flex-start;
  &.shrinkage {
    // width: 80px;
    .box-left {
      width: 50px;
      .tree-title {
        flex-flow: column;
        padding-bottom: 0;
        .bold {
          max-width: 0;
          max-width: 0;
          opacity: 0;
          width: 0;
          height: 0;
          min-width: 0;
        }
        > i {
          position: relative;
          top: -4px;
          transform: rotate(180deg);
          color: #fff;
        }
      }
    }
    .content-list {
      width: calc(100% - 50px);
    }
  }
  .box-left {
    width: 185px;
    color: #fff;
    background-color: #4f81c4;
    border: solid 1px #e6e6e6;
    border-radius: 2px;
    -webkit-transition: width 0.2s;
    transition: width 0.2s;
    .tree {
      overflow: auto;
    }
    .tree-title {
      padding: 14px 10px;
      border-bottom: solid 1px #3168b1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      > i {
        cursor: pointer;
        -webkit-transition: all 0.6s;
        transition: all 0.6s;
        &:hover {
          color: #dbdbdb;
        }
      }
      .bold {
        color: #fff;
      }
    }
    font-size: 16px;
    margin-top: 10px;
    ul {
      display: block;
    }
    /deep/ .ant-tree-switcher {
      background: unset !important;
    }
    /deep/ .ant-tree li {
      padding: 4px;
      .ant-tree-node-content-wrapper,
      .anticon {
        color: #f5f9ff;
      }
      .ant-tree-node-content-wrapper.ant-tree-node-selected {
        background-color: #3168b1;
      }
      .ant-tree-node-content-wrapper:hover {
        background-color: #3a71bb;
      }
    }
    /deep/ .ant-tree.ant-tree-show-line li:not(:last-child)::before {
      left: 15px;
    }
  }
  .content-list {
    width: calc(100% - 185px);
    margin-top: 10px;        
    padding-left: 20px;
    .cascade {
      margin: 0 0 20px;
    }
    .head {
      background-color: #fff;
      .headContent {
        background-color: #e8eef1;
        height: 49px;
        padding: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: flex;
        align-items: center;
        .title {
          font-size: 18px;
          color: #333333;
          font-weight: bold;
        }
        .info{color: #177cb7;font-size: 14px;margin-left:15px;
          i{display: inline-block;width: 15px;}
        }
        .detail {
          font-size: 14px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 40px;
          letter-spacing: 0px;
          color: #2c6abc;
          margin-left: 20px;
          font-weight: bold; 
          cursor: pointer;
          &:hover {          
            color: #31a0e1;
          }
        }
        .headSelect {
          margin-left: 30px;
          width: 150px;
        }
      }      
      .hte-nav-tap {
        background-color: #f5f5f5;
      }
    }
    .content {
      border: 1px solid #dbdbdb;
      border-bottom: 0;
      padding: 15px;
      background-color: #fff;
      ul {
        color: #333333;
        font-size: 14px;
        display: block;
        position: relative;
        font-weight: inherit;
        height: 44px;
        padding: 0 15px;
        li {
          font-size: 16px;
          float: left;
          padding: 10px 15px;
        }
      }
    }
  }
}
</style>